<extend name="Base/base" />
<block name='head'>
    <link rel="stylesheet" type="text/css" href="/Public/Admin/css/main.css" media="all"/>
    <style>
        p{margin:0}
        .items p{width:12%}
        .items span{display:inline-block;width:6%}
        .mian-page .numbox .ymbol{postion:relative;}
        .mian-page .numbox .ymbol .num{width:31px;height:31px;line-height:26px;font-size:12px;font-weight: 500;position:absolute;border: 3px solid #fff;right: -10px;top: -10px;border-radius: 50%;color:#fff}
    </style>
</block>
<block name="content" > 
    <section class="larry-wrapper">
        <div class="row state-overview">
            <div class="col-lg-2 col-sm-3 layui-anim numbox insertBox">
                <a href="{:U('Plan/save')}"><div class="ymbol layui-anim layui-anim-scale">
                        <span></span>
                        <p style="color:#000">新建工作计划</p>
                    </div></a>
            </div>
            <div class="col-lg-2 col-sm-3 layui-anim numbox">
                <div class="ymbol bgFFA05A layui-anim layui-anim-scale">
                    <a href="{:U('Plan/index',array('sms_flag'=>0,'dept'=>1,'type'=>1))}">
                        <span>{$unfinishedCount}</span>	
                        <p>未完成计划</p>
                    </a>
                    <if condition="$unfinishReaderNumber neq 0">
                        <a href="{:U('Plan/lists',array('sms_flag'=>0,'dept'=>1,'type'=>1))}">
                            <div class="num bgFFA05A">{$unfinishReaderNumber}</div>
                        </a>
                    </if>
                </div>
            </div>
            <div class="col-lg-2 col-sm-3 layui-anim numbox">
                <div class="ymbol bg43BDEC layui-anim layui-anim-scale">
                    <a href="{:U('Plan/index',array('sms_flag'=>1,'dept'=>1,'type'=>2))}">
                        <span>{$finishCount}</span>	
                        <p>已完成计划</p>
                    </a>
                    <if condition="$finishReaderNumber neq 0">
                        <a href="{:U('Plan/lists',array('sms_flag'=>1,'dept'=>1,'type'=>2))}">
                            <div class="num bg43BDEC noRead pointer">{$finishReaderNumber}</div>
                        </a>
                    </if>
                </div>
            </div>
            <div class="col-lg-2 col-sm-3 layui-anim numbox">
                <div class="ymbol bg18C4BE layui-anim layui-anim-scale">
                    <a href="{:U('Plan/index',array('follow'=>1,'type'=>3))}">
                        <span>{$followCount}</span>	
                        <p>我的关注计划</p>
                    </a>
                    <if condition="$followReadNumber neq 0">
                        <a href="{:U('Plan/lists',array('follow'=>1,'type'=>3))}">
                            <div class="num bg18C4BE noRead pointer">{$followReadNumber}</div>
                        </a>
                    </if>
                </div>
            </div>
            <div class="col-lg-2 col-sm-3 layui-anim numbox">
                <div class="ymbol bgA793F3 layui-anim layui-anim layui-anim-scale">
                    <a href="{:U('Plan/index',array('sms_flag'=>0,'type'=>4))}">
                        <span>{$allCount}</span>	
                        <p>我的计划</p>
                    </a>
                    <if condition="$myPlanReadNumber neq 0">
                        <a href="{:U('Plan/lists',array('sms_flag'=>0,'type'=>4))}">
                            <div class="num bgA793F3 noRead pointer">{$myPlanReadNumber}</div>
                        </a>
                    </if>
                </div>
            </div>
        </div>
        <!--第二部分-->
        <div class="row">
            <if condition="$userPriv == 'deptLeader'">
                <div class="col-lg-6 col-sm-6">
                    <div class="plan">
                        <h3 style="margin:0;padding-bottom: 15px"><i class="layui-icon chartIcon"> </i> 部门计划统计图</h3>
                        <div class="plan_lists" id="echartsMain" style="width:100%;height:300px">
                        </div>
                        <input type="hidden" id="deptEcharts" value="{:U('getDeptPlanPercent')}">
                    </div>
                </div>
                <else/>
                <div class="col-lg-6 col-sm-6">
                    <div class="plan">
                        <h3 style="margin:0;padding-bottom: 15px"><i class="layui-icon chartIcon"></i> 我的计划统计图</h3>
                        <foreach name="userPercents" item="userPercent" key="key">
                            <div class="items">
                                <p>{$userPercent.name}</p>
                                <div class="progress">
                                    <div class="color{$userPercent.step}" style="width:{$userPercent.total}"></div>
                                </div>
                                <span>{$userPercent.total}</span>
                            </div>
                        </foreach>
                    </div>
                </div>
            </if>
            <div class="col-lg-6 col-sm-6">
                <div class="plan" style="height:366px">
                    <h3 style="margin:0;padding-bottom: 15px"><i class="layui-icon planIcon"></i> 最新计划</h3>
                    <notempty name="plans">
                        <foreach name="plans" item="plan" key="key">
                            <p><a href="{:U('Plan/show',array('id'=>$plan['plan_id']))}" title="{$plan.name}">{$key+1}、{$plan.short}</a><span>{$plan.total_percent}%</span></p>
                        </foreach>
                        <else />
                        <p>暂无计划</p>
                    </notempty>
                </div>
            </div>
        </div>
        <!--第三部分-->
        <if condition="$userPriv == 'comLeader' or $user_id eq 'huangweijiang' or $user_id eq 'zhangyingheng'">
            <div class="row" style="margin-top:20px">
                <div class="col-lg-12 col-sm-12">
                    <div class="plan">
                        <h3 style="margin:0;padding-bottom: 15px"><i class="layui-icon">&#xe62c; </i> 各部门计划统计图</h3>
                        <div class="plan_lists" id="echartsDeptMain" style="width:100%;height:300px">
                        </div>
                        <input type="hidden" id="deptAllEcharts" value="{:U('getDeptAllPlanPercent')}">
                    </div>
                </div>
            </div>
        </if>
    </section>
    <input type="hidden" id="planUrl" value="{:U('getPlanUrl')}">
</block>
<block name="script">
    <script type="text/javascript" src="/Public/Admin/js/echarts.min.js"></script>
    <script type="text/javascript">
        layui.use(['jquery', 'layer', 'element'], function () {
            window.jQuery = window.$ = layui.jquery;
            window.layer = layui.layer;
            window.element = layui.element();
        });
    </script>
    <script type="text/javascript">

        $(function () {
            if ($('#deptEcharts').val()) {
                $.get($('#deptEcharts').val(), function (res) {
//                    console.log(res);
                    param = res;
                    var myChart = echarts.init(document.getElementById('echartsMain'));
                    var option = {
                        tooltip: {
                            trigger: 'item',
                            axisPointer: {
                                type: 'shadow',
                            },
                            formatter: function (params, ticket, callback) {
                                //console.log(params)
                                var id = params.seriesIndex;
                                var type;
                                if (id == 0) {
                                    type = '个人进度';
                                } else {
                                    type = '部门进度';
                                }
                                var html = '<p>' + params.name + '</p>';
                                html += '<p>' + type + '：' + params.value + '%</p>';
                                return html;
                            },
                        },
                        legend: {
                            left: 'right',
                            top: '6%', //图例组件顶部的距离
                            bottom: '50px',
                            data: ['个人进度', '部门进度'],
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true,
                        },
                        xAxis: [{
                                type: 'category',
                                data: res.type
                            }],
                        yAxis: [{type: 'value'}],
                        series: [
                            {
                                name: res.name[0],
                                type: 'bar',
                                barWidth: 18,
                                data: res.userNumber,
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'top',
                                        formatter: '{c}%'
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        color: '#ffa060'
                                    }
                                },
                            },
                            {
                                name: res.name[1],
                                type: 'bar',
                                barWidth: 18,
                                data: res.deptNumber,
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'top',
                                        formatter: '{c}%'
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        color: '#5FC6C6'
                                    }
                                },
                            }
                        ]
                    };
                    myChart.setOption(option);
                    myChart.on('click', function (e) {
//                        console.log(e);
                        var name = e.name;
                        var type = e.seriesName;
                        var url = $('#planUrl').val() + '?name=' + type + '&type=' + name;
                        $.get(url, function (res) {
                            console.log(res);
                            location.href = res;
                        })
                    })
                })
            }

            //各部门各分类计划图
            if ($('#deptAllEcharts').val()) {
                $.get($('#deptAllEcharts').val(), function (res) {
//                    console.log(res);
                    param = res;
                    var myChart = echarts.init(document.getElementById('echartsDeptMain'));
                    var option = {
                        tooltip: {
                            trigger: 'item',
                            axisPointer: {
                                type: 'shadow',
                            },
                            formatter: function (params, ticket, callback) {
//                                console.log(params)
                                var html = '<p>' + params.name + '</p>';
                                html += '<p>' + params.seriesName + '</p>';
                                html += '<p>' + '完成率' + params.value + '%</p>';
                                return html;
                            },
                        },
                        legend: {
                            left: 'right',
                            top: '6%', //图例组件顶部的距离
                            bottom: '50px',
                            data: res.name,
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true,
                        },
                        xAxis: [{
                                type: 'category',
                                data: res.type
                            }],
                        yAxis: [{type: 'value'}],
                        series: [
                            {
                                name: res.name[0],
                                type: 'bar',
                                barWidth: 18,
                                data: res.dayPercent,
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'top',
                                        formatter: '{c}%'
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        color: '#43bdec'
                                    }
                                },
                            },
                            {
                                name: res.name[1],
                                type: 'bar',
                                barWidth: 18,
                                data: res.monthPercent,
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'top',
                                        formatter: '{c}%'
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        color: '#ffa05a'
                                    }
                                },
                            },
                            {
                                name: res.name[2],
                                type: 'bar',
                                barWidth: 18,
                                data: res.proPercent,
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'top',
                                        formatter: '{c}%'
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        color: '#5FC6C6'
                                    }
                                },
                            },
                            {
                                name: res.name[3],
                                type: 'bar',
                                barWidth: 18,
                                data: res.yearPercent,
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'top',
                                        formatter: '{c}%'
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        color: '#A793F3'
                                    }
                                },
                            }
                        ]
                    };
                    myChart.setOption(option);
                    myChart.on('click', function (e) {
                        var name = e.name;
                        var type = e.seriesName;
                        var url = $('#planUrl').val() + '?name=' + name + '&type=' + type;
                        $.get(url, function (res) {
                            console.log(res)
                            location.href = res;
                        })
                    })
                })
            }
        })
    </script>
</block>